<template>
	<view>
		    <view class="page-section page-section-spacing swiper">
		      <swiper
		        :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :vertical="vertical"
		        :interval="interval" :duration="duration" :previous-margin="(previousMargin)px" :next-margin="(nextMargin)px">
		        <view v-for="item in background">
		          <swiper-item>
		            <view class="swiper-item"> {{item}}</view>
		          </swiper-item>
		        </view>
		      </swiper>
		    </view>
	</view>
</template>
<script>
	export default {
		name:"swiper",
		data() {
			return {
				 background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
				    indicatorDots: true,
				    vertical: false,
				    autoplay: false,
				    circular: false,
				    interval: 2000,
				    duration: 500,
				    previousMargin: 0,
				    nextMargin: 0
			};
		},
		methods:{
			changeProperty: function (e) {
			    var propertyName = e.currentTarget.dataset.propertyName
			    var newData = {}
			    newData[propertyName] = e.detail.value
			    this.setData(newData)
			  },
			  changeIndicatorDots: function (e) {
			    this.setData({
			      indicatorDots: !this.data.indicatorDots
			    })
			  },
			  changeAutoplay: function (e) {
			    this.setData({
			      autoplay: !this.data.autoplay
			    })
			  },
			  intervalChange: function (e) {
			    this.setData({
			      interval: e.detail.value
			    })
			  },
			  durationChange: function (e) {
			    this.setData({
			      duration: e.detail.value
			    })
			  }
		}
	}
</script>

<style lang="scss">
.page-section{
  width: 100%;
  margin-bottom: 60rpx;
}
.page-section_center{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-section:last-child{
  margin-bottom: 0;
}
.page-section-spacing{
  box-sizing: border-box;
  padding: 0 80rpx;
}
</style>